<template>
  <view>
    <fu-custom bgColor="bg-white" :isBack="true" :isBottom="true">
      <block slot="content">我的收藏</block>
    </fu-custom>
    <view class="flex text-df align-center justify-between catyeList">
      <view class="flex catebox">
        <view class="cateItem" :class="tabId==item.id? 'active' : ''" v-for="(item,index) in tabList" :key="index"
          @click="chooseTab(item)">
          {{item.name}}
        </view>
      </view>
      <view class="edit" v-if="dataList.length" @click="overEdit">{{!isedit ? '编辑' : '完成'}}</view>
    </view>
    <view class="container">
      <!-- 门店 -->
      <view v-if="tabId==1">
        <view class="flex flex-direction align-center align-stretch benben-flex-layout searchResult_flex_3">
          <view class="flex align-center" v-for='(item,key0) in dataList' :key="key0" @tap.stop="handleJumpDiy"
            data-type="navigateTo" :data-url="`/pages/sy/shopdetail/shopdetail?usermerchant_aid=${item.shopIdk}`">
            <view @click.stop="addEDit(item)" v-if="isedit">
              <image v-if="item.isShow" class='check-shop' mode="aspectFill" :src='STATIC_URL+"3.png"'></image>
              <image v-else class='check-shop' mode="aspectFill" :src='STATIC_URL+"213.png"'>
              </image>
            </view>
            <view class='flex flex-direction flex-wrap align-stretch searchResult_fd3_0'>
              <view class='flex flex-direction align-stretch'>
                <view class='flex align-stretch'>
                  <image class='searchResult_fd3_0_c0_c0_c0' mode="aspectFill" :src='item.coverPic'></image>
                  <view class='flex flex-direction align-stretch flex-sub searchResult_fd3_0_c0_c0_c1'>
                    <text class='searchResult_fd3_0_c0_c0_c1_c0'>{{item.shopName}}</text>
                    <view class='flex flex-direction flex-wrap align-stretch searchResult_fd3_0_c0_c0_c1_c1'>
                      <view class='flex flex-wrap margin-tb-xs align-center'>
                        <text>电话</text>
                        <text class='searchResult_fd3_0_c0_c0_c1_c1_c0_c1'>{{item.shopPhone}}</text>
                      </view>
                      <view class='flex justify-between align-stretch'>
                        <view class="flex align-start">
                          <view class='searchResult_fd3_0_c0_c0_c1_c1_c1_c0'>位置</view>
                          <view class='text-cut-2 searchResult_fd3_0_c0_c0_c1_c1_c1_c1'>{{item.address}}</view>
                        </view>
                        <view>
                          <view class='flex align-center' @click.stop="goMap(item)">
                            <image class='searchResult_fd3_0_c0_c0_c2_c1_c0' mode="aspectFit"
                              :src='STATIC_URL+"512.png"'>
                            </image>
                            <text class='searchResult_fd3_0_c0_c0_c2_c1_c1'>导航</text>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>

                </view>
              </view>
            </view>
          </view>

        </view>
      </view>
      <!-- endddd -->
      <!-- 商品 -->
      <view v-if="tabId==2">
        <view class='flex flex-wrap align-center justify-between  goods'>
          <template v-for='(item,key0) in dataList'>
            <view class='flex flex-direction flex-wrap align-stretch home_fd4_2_c0' :key='key0'
              @tap.stop="handleJumpDiy" data-type="navigateTo"
              :data-url="`/pages/fl/shopDetail/shopDetail?id=${item.comdIdk}`">
              <view class="home_fd4_2_c0_c0 position-relative">
                <image class='home_fd4_2_c0_c0' mode="aspectFill" :src='item.coverPic'></image>
                <view @click.stop="addEDit(item)" v-if="isedit">
                  <image v-if="item.isShow" class='myCollections_checkfd3_0_c0_c0_c0' mode="aspectFill"
                    :src='STATIC_URL+"3.png"'></image>
                  <image v-else class='myCollections_checkfd3_0_c0_c0_c0' mode="aspectFill" :src='STATIC_URL+"213.png"'>
                  </image>
                </view>

              </view>

              <text class='flex-sub home_fd4_2_c0_c1'>{{item.comdName}}</text>
              <view class='flex flex-direction align-stretch home_fd4_2_c0_c2' @tap.stop="goDetail(item)">
                <view class='flex flex-wrap align-center home_fd4_2_c0_c2_c0'>
                  <image class='home_fd4_2_c0_c2_c0_c0' mode="aspectFit" :src='STATIC_URL+"500.png"'></image>
                  <text class='home_fd4_2_c0_c2_c0_c1'>￥{{item.rentPrice}}/月</text>
                </view>
                <view class='flex flex-wrap align-center'>
                  <image class='home_fd4_2_c0_c2_c0_c0' mode="aspectFit" :src='STATIC_URL+"501.png"'></image>
                  <text class='home_fd4_2_c0_c2_c0_c1'>￥{{item.sellPrice}}</text>
                </view>
              </view>
              <view class='flex flex-wrap align-center justify-between home_fd4_2_c0_c3' @tap.stop="goDetail(item)">
                <text class='home_fd4_2_c0_c3_c0'>{{item.shopName || '暂无'}}</text>
                <view class='flex flex-wrap align-center'>
                  <text class='home_fd4_2_c0_c3_c0'>进店</text>
                  <text class='fu-iconfont2  home_fd4_2_c0_c3_c1_c1'>&#xe7f2;</text>
                </view>
              </view>
            </view>
          </template>

        </view>
      </view>
      <!-- end -->
    </view>
    <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
      :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
    <view class="bg-white flex justify-between align-center fiexed_bottom" v-if="isedit">
      <view class="flex justify-between align-center fixed-r" @click.stop="checkAll">
        <view class="flex align-center">
          <image v-if="isAll" class='check' mode="aspectFill" :src='STATIC_URL+"3.png"'>
          </image>
          <image v-else class='check' mode="aspectFill" :src='STATIC_URL+"213.png"'>
          </image>
        </view>
        <view class="text-333 text-df">全选</view>
      </view>
      <view class="delbtn" @click.stop="delGoods">删除</view>
    </view>
  </view>
</template>
<script>
  import pagingList from '@/common/mixin/paging_list.js';
  export default {
    mixins: [pagingList],
    data() {
      return {
        tabList: [{
            id: 1,
            name: '门店'
          },
          {
            id: 2,
            name: '商品'
          }
        ],
        tabId: 1,
        isedit: false,
        "minixPagingListsApi": "",
        "pageingListApiMethod": "",
        "allowOnloadGetList": false,
        dataList: [],
        isAll: false,
        delArr: []
      }
    },
    onLoad() {
      this.getListFunc()
    },
    methods: {
      goMap(item) {
        console.log('goMap', item)
        uni.openLocation({
          latitude: parseFloat(item.latitude),
          longitude: parseFloat(item.longitude),
          name: item.shopName,
          success: function() {
            console.log('success');
          }
        });
      },
      chooseTab(item) {
        this.tabId = item.id
        this.isAll = false
        this.delArr = []
        this.getListFunc()
      },
      overEdit() {
        this.isedit = !this.isedit
      },
      addEDit(item) {
        item.isShow = !item.isShow
        this.delArr = this.dataList.filter(item => item.isShow)
        if (this.delArr.length == this.dataList.length) {
          this.isAll = true
        } else {
          this.isAll = false
        }
        console.log('iiii', this.delArr)
      },
      checkAll() {
        this.isAll = !this.isAll
        for (var i = 0; i < this.dataList.length; i++) {
          this.dataList[i].isShow = this.isAll
        }
        this.delArr = this.dataList.filter(item => item.isShow)
      },
      delGoods() {
        if (this.delArr.length == 0) {
          this.$message.info('请选择')
          return
        }
        let ids = this.dataList.filter(item => item.isShow).map(itemC => {
          return itemC.id
        })
        let urls = ''
        if (this.tabId == 1) {
          urls = global.apiUrls.delUserShopCollBatch
        } else {
          urls = global.apiUrls.delCommodCollBatch
        }
        this.$api.dbPost(urls, {
          ids: ids
        }).then(res => {
          this.$message.info(res.data.msg)
          if (res.data.code == 0) {
            this.isAll = false
            this.isedit = false
            this.delArr = []
            this.getListFunc()
          }
        })
      },
      // 跳转详情
      goDetail(item) {
        console.log('pppp')
        uni.navigateTo({
          url: `/pages/fl/shopDetail/shopDetail?id=${item.comdIdk}`
        })
      },
      //获取为你推荐列表
      getListFunc() {
        let urlsdata = ''
        if (this.tabId == 1) {
          urlsdata = global.apiUrls.qryUserShopColl
        } else {
          urlsdata = global.apiUrls.qryCommodColl
        }
        // 收藏的商品
        this.minixPagingListsApi = urlsdata;
        this.pageingListApiMethod = 'get';
        this.allowOnloadGetList = false;
        this.pagingListPostDataContent = {}
        this.listData = [];
        this.dataList = this.listData;
        this.pagingListToggle();

      },
      pagingListPostData() {
        return this.pagingListPostDataContent
      }
    }
  }
</script>
<style lang="scss">
  .check-shop {
    width: 32rpx;
    height: 32rpx;
    margin: 0rpx 32rpx 0 32rpx;
  }

  .fiexed_bottom {
    width: 100%;
    padding: 24rpx;
    position: fixed;
    left: 0;
    bottom: 0;

    .check {
      width: 32rpx;
      height: 32rpx;
    }

    .fixed-r {
      width: 100rpx;
    }

    .delbtn {
      width: 160rpx;
      height: 60rpx;
      line-height: 60rpx;
      background-color: #f8f8f8;
      border-radius: 44rpx;
      text-align: center;
    }
  }

  .searchResult_flex_3 {
    margin-top: 24rpx;
  }

  .searchResult_fd3_0_c0_c0_c2_c1_c1 {
    font-size: 24rpx;
    color: var(--benbenFontColor4);
  }

  .searchResult_fd3_0_c0_c0_c2_c1_c0 {
    width: 33rpx;
    height: 33rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin-right: 10rpx;
  }

  .searchResult_fd3_0_c0_c0_c2_c0_c0 {
    color: var(--benbenFontColor6);
    font-size: 22rpx;
  }

  .searchResult_fd3_0_c0_c0_c1_c1_c1_c1 {
    margin: 0rpx 0rpx 0rpx 24rpx;
    max-width: 200rpx;
  }

  .searchResult_fd3_0_c0_c0_c1_c1_c1_c0 {
    width: 60rpx;
  }

  .searchResult_fd3_0_c0_c0_c1_c1_c0_c1 {
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .searchResult_fd3_0_c0_c0_c1_c1 {
    color: var(--benbenFontColor2);
  }

  .searchResult_fd3_0_c0_c0_c1_c0 {
    color: var(--benbenFontColor0);
    font-size: 32rpx;
    font-weight: 700;
    margin: 0rpx 0rpx 0 0rpx;
  }

  .searchResult_fd3_0_c0_c0_c1 {
    margin: 0rpx 16rpx 0rpx 16rpx;
  }

  .searchResult_fd3_0_c0_c0_c0 {
    width: 184rpx;
    height: 184rpx;
    border-radius: 8rpx;
  }

  .searchResult_fd3_0 {
    background: #fff;
    width: 710rpx;
    margin: 0 auto 24rpx auto;
    padding: 24rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .catyeList {
    width: 100%;
    padding: 24rpx;
    background-color: #fff;

    .catebox {
      .cateItem {
        width: 120rpx;
        text-align: center;

        &.active {
          color: #327FFB;
        }
      }

    }
  }

  .container {
    padding: 24rpx 0 100rpx 0;
  }

  .myCollections_checkfd3_0_c0_c0_c0 {
    width: 32rpx;
    height: 32rpx;
    position: absolute;
    top: 12rpx;
    left: 12rpx;
    z-index: 2;
  }

  .goods {
    width: 710rpx;
    margin: 0 auto;
  }

  .home_fd4_2_c0_c3_c1_c1 {
    font-size: 22rpx;
    color: var(--benbenFontColor1);
  }

  .home_fd4_2_c0_c3_c0 {
    color: var(--benbenFontColor1);
    font-size: 24rpx;
  }

  .home_fd4_2_c0_c3 {
    background: rgba(246, 246, 246, 1);
    padding: 6rpx;
    border-radius: 44rpx;
    background-size: 100% auto;
    width: 300rpx;
    margin: 12rpx auto 0rpx auto;
  }

  .home_fd4_2_c0_c2_c0_c1 {
    color: rgba(217, 50, 32, 1);
    font-weight: 600;
  }

  .home_fd4_2_c0_c2_c0_c0 {
    width: 32rpx;
    height: 32rpx;
    margin: 0rpx 10rpx 0rpx 0rpx;
  }

  .home_fd4_2_c0_c2_c0 {
    margin: 12rpx 0rpx 12rpx 0rpx;
  }

  .home_fd4_2_c0_c2 {
    margin: 0rpx 20rpx 0rpx 20rpx;
  }

  .home_fd4_2_c0_c1 {
    font-size: 28rpx;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    margin: 0rpx 20rpx 0rpx 20rpx;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .home_fd4_2_c0_c0 {
    width: 346rpx;
    height: 346rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin: 0rpx 0rpx 24rpx 0rpx;
  }

  .home_fd4_2_c0 {
    background: #fff;
    background-size: 100% auto !important;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 0rpx 0rpx 22rpx 0rpx;
    margin: 0rpx 0rpx 8rpx 0rpx;
    width: 346rpx;
  }
</style>
